@import "common.less";

.trade-rank{padding-top: 100/@rem;padding-bottom: 60/@rem;
  h1{margin-top: 58/@rem;font-size: 70/@rem;color: #2871d5;text-align: center;}
  h2{text-align: center;color: #6291d1;font-size: 40/@rem;}
  .btn-show{background-color: #e1f7ff;line-height: 78/@rem;border-radius: 10px;width: 330/@rem;font-size: 24/@rem;color: @color-blue;display: block;margin: 20/@rem auto;text-align: center;}

  .list-box{padding-left: 24/@rem;overflow: hidden;
    .list{position: relative;width: 320/@rem;margin: 90/@rem 0 0 24/@rem;float: left;padding: 0 36/@rem;background-color: #e1f7ff;border-radius: 10px;box-sizing: border-box;
      .icon{position: absolute;width: 96/@rem;height: 96/@rem;left: 112/@rem;top: -48/@rem;border-radius: 100%;line-height: 96/@rem;text-align: center;
        //img{height: 40/@rem;vertical-align: middle;}
        &.img-1{background: @color-blue url("/src/img/icon-1.png") no-repeat center center;background-size: auto 40/@rem;}
        &.img-2{background: @color-blue url("/src/img/icon-2.png") no-repeat center center;background-size: auto 40/@rem;}
        &.img-3{background: @color-blue url("/src/img/icon-3.png") no-repeat center center;background-size: auto 40/@rem;}
        &.img-4{background: @color-blue url("/src/img/icon-4.png") no-repeat center center;background-size: auto 40/@rem;}
        &.img-5{background: @color-blue url("/src/img/icon-5.png") no-repeat center center;background-size: auto 40/@rem;}
        &.img-6{background: @color-blue url("/src/img/icon-6.png") no-repeat center center;background-size: auto 40/@rem;}
        &.img-7{background: @color-blue url("/src/img/icon-7.png") no-repeat center center;background-size: auto 40/@rem;}
        &.img-8{background: @color-blue url("/src/img/icon-8.png") no-repeat center center;background-size: auto 40/@rem;}
        &.img-9{background: @color-blue url("/src/img/icon-9.png") no-repeat center center;background-size: auto 40/@rem;}
        &.img-10{background: @color-blue url("/src/img/icon-10.png") no-repeat center center;background-size: auto 40/@rem;}
      }
      .tit{padding: 64/@rem 0 20/@rem;border-bottom: 1px solid #add9f6;color: #2871d5;font-size: 32/@rem;text-align: center;}
      .ul-box{overflow: hidden;}
      ul{margin-top: 12/@rem;overflow: hidden;margin-left: -1px;
        li{float: left;padding: 0 10/@rem;border:1px solid rgba(156,207,243,0.6);border-right: 0;border-top: 0;box-sizing: border-box;width: 50%;line-height: 70/@rem;  text-align: center;font-size: 22/@rem;color: #6690bc;height: 70/@rem;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
      }
      .btn-all{margin: 22/@rem auto;width: 125/@rem;display: block;text-align: center;color: #6690bc;font-size: 22/@rem;line-height: 36/@rem;border: 1px solid #a3c3dd;border-radius: 30/@rem;}
    }
  }

}